<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
    class="w-full"
  >
    <el-form-item label="事件名称" prop="name">
      <el-input v-model="newFormInline.name" placeholder="请输入事件名称" />
    </el-form-item>
    <el-form-item label="状态" prop="disabled">
      <el-select v-model="newFormInline.disabled" placeholder="请选择状态">
        <el-option label="启用" :value="true" />
        <el-option label="禁用" :value="false" />
      </el-select>
    </el-form-item>
    <el-form-item label="备注" prop="comment">
      <el-input
        v-model="newFormInline.comment"
        type="textarea"
        :maxlength="200"
        show-word-limit
        :rows="4"
        placeholder="请输入备注，最多200字"
      />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, withDefaults, onMounted } from "vue";

import { FormProps } from "../componentsUtils/type/eventTypes";
import { formRules } from "../componentsUtils/rule/eventRules";
import { ElMessage } from "element-plus";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: 0,
    dealerId: 0,
    tenantId: 0,
    name: "",
    disabled: false,
    comment: ""
  }),
  title: ""
});

const newFormInline = ref(props.formInline);
const ruleFormRef = ref();

function getRef() {
  return ruleFormRef.value;
}

onMounted(() => {
  newFormInline.value.disabled = true;
});

defineExpose({ getRef });
</script>
